import React, { useEffect, useState, useRef } from "react";
import {
    NavBar,
    Toast,
    Input,
    Button,
    Cell,
    Avatar,
    Dialog
} from '@nutui/nutui-react';
import {
    Share,
    ArrowLeft,
    Service,
    User
} from '@nutui/icons-react';
import { useNavigate } from 'react-router-dom';
import styles from './merchant.module.css';

const Merchant = () => {

    // 模拟自动回复逻辑
    const mockAutoReply = (userMessage) => {
        // 新增房型详细信息
        const roomDetails = {
            '1': '标准大床房详情：\n面积：28㎡\n床型：1.8米大床\n设施：免费WiFi、智能电视、独立卫浴\n价格：¥599/晚',
            '2': '豪华双床房详情：\n面积：35㎡\n床型：2张1.2米单人床\n设施：景观阳台、迷你吧、浴缸\n价格：¥699/晚',
            '3': '行政套房详情：\n面积：68㎡\n配置：独立客厅+卧室\n设施：行政酒廊待遇、欢迎水果\n价格：¥999/晚',
            '4': '海景家庭房详情：\n面积：45㎡\n床型：1.8米大床+儿童床\n特色：180°海景阳台\n价格：¥899/晚'
        };

        // 优先检查上下文
        if (currentContext === '房型' && /\d+/.test(userMessage)) {
            return Promise.resolve(roomDetails[userMessage] || '请输入1-4查看对应房型详情');
        }

        const responses = {
            '房型': () => {  // 改为函数形式
                setCurrentContext('房型');
                return '我们提供以下房型：\n1. 标准大床房\n2. 豪华双床房\n3. 行政套房\n4. 海景家庭房\n请回复编号查看详情';
            },
            '价格': '今日房价：\n标准大床房 ¥599\n豪华双床房 ¥699\n行政套房 ¥999\n含双早，支持在线预订',
            '预订': '您可以通过以下方式预订：\n1. 官网直接预订\n2. 拨打400-1234-5678\n3. 微信小程序搜索"酒店"',
            '取消': '取消政策：\n入住前48小时可免费取消\n超时取消收取首晚房费',
            '人工': () => {
                setShowTransfer(true);
                return '正在为您转接人工客服...';
            }
        };

        return new Promise((resolve) => {
            setTimeout(() => {
                const key = Object.keys(responses).find(k => userMessage.includes(k));

                if (key) {
                    const response = responses[key];
                    resolve(typeof response === 'function' ? response() : response);
                } else {
                    setCurrentContext(null); // 重置上下文
                    resolve(/\d+/.test(userMessage) ? '请先发送【房型】查看房型列表' : '要转接人工客服吗？');
                }
            }, 800); // 800ms 延迟模拟真实接口响应时间
        });
    };

    // 聊天功能相关状态
    const navigate = useNavigate();
    const [inputMsg, setInputMsg] = useState('');
    const [messages, setMessages] = useState([]);
    const [showTransfer, setShowTransfer] = useState(false);
    const [showTransfer1, setShowTransfer1] = useState(false);
    const [isTyping, setIsTyping] = useState(false); // 新增：模拟客服正在输入
    const chatEndRef = useRef(null);
    // 新增：初始引导语发送控制
    const [hasSentWelcome, setHasSentWelcome] = useState(false);
    const [currentContext, setCurrentContext] = useState(null);

    // 添加快捷回复选项
    const quickReplies = ['房型', '价格', '预订', '取消', '人工客服'];

    useEffect(() => {
        // 当没有消息且未发送过欢迎语时
        if (messages.length === 0 && !hasSentWelcome) {
            const welcomeMessage = {
                id: Date.now(),
                content: '您好，请问需要咨询：\n1. 房型查询\n2. 价格咨询\n3. 预订流程\n4. 取消政策\n请回复对应关键词',
                isBot: true,
                timestamp: Date.now()
            };

            setMessages([welcomeMessage]);
            setHasSentWelcome(true);

            // 自动滚动到底部
            setTimeout(() => {
                chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
            }, 100);
        }
    }, [messages.length, hasSentWelcome]); // 仅在初始加载时触发

    // 自动滚动到底部
    useEffect(() => {
        chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
    }, [messages]);

    const handleTransfer = () => {
        // Dialog.confirm({
        //     title: '转接人工客服',
        //     content: '确认要转接人工客服吗？',
        //     onConfirm: () => {
        //         // 跳转到人工客服页面

        //     },
        //     onCancel: () => setShowTransfer(false)
        // });
        navigate('/ke', {
            state: { chatHistory: messages } // 携带聊天记录
        });
    };

    // 发送消息处理
    const handleSend = async () => {
        if (!inputMsg.trim()) return;
        // 当发送新消息时，如果不是数字则重置上下文
        if (!/\d+/.test(inputMsg)) {
            setCurrentContext(null);
        }
        // 用户消息
        const userMsg = {
            id: Date.now(),
            content: inputMsg,
            isBot: false,
            timestamp: Date.now()
        };

        setMessages(prev => [...prev, userMsg]);
        setInputMsg('');
        setIsTyping(true); // 显示客服正在输入

        try {
            const reply = await mockAutoReply(inputMsg);

            // 延迟显示回复，更真实
            setTimeout(() => {
                setIsTyping(false);
                // 机器人消息
                const botMsg = {
                    id: Date.now() + 1,
                    content: reply,
                    isBot: true,
                    timestamp: Date.now() + 1
                };

                setMessages(prev => [...prev, botMsg]);
                // 自动触发转人工对话框
                if (inputMsg.includes('人工')) {
                    setShowTransfer(true);
                }
            }, 600);
        } catch (error) {
            setIsTyping(false);
            console.error('回复生成失败:', error);
        }
    };

    // 点击快捷回复
    const handleQuickReply = (text) => {
        setInputMsg(text);
        setTimeout(() => handleSend(), 100);
    };

    // 格式化时间显示
    const formatTime = (timestamp) => {
        const date = new Date(timestamp);
        return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
    };

    // 判断是否显示时间标记
    const shouldShowTimestamp = (index, messages) => {
        if (index === 0) return true;
        const prevTimestamp = messages[index - 1].timestamp;
        const currentTimestamp = messages[index].timestamp;
        // 如果两条消息间隔超过5分钟，显示时间
        return (currentTimestamp - prevTimestamp) > 5 * 60 * 1000;
    };

    return (
        <div className={styles.container}>
            {/* 顶部导航栏 */}
            <NavBar
                className={styles.navBar}
                back={
                    <>
                        <ArrowLeft className={styles.navBarIcon} />
                        <span>返回</span>
                    </>
                }
                right={
                    <span
                        onClick={(e) => Toast.show('分享功能')}
                    >
                        <Share className={styles.navBarIcon} />
                    </span>
                }
                onBackClick={(e) => Toast.show('返回')}
            >

            </NavBar>

            {/* 聊天内容区域 */}
            <div className={styles.chatContainer}>
                {messages.map((msg, index) => (
                    <React.Fragment key={msg.id}>
                        {shouldShowTimestamp(index, messages) && (
                            <div className={styles.timestamp}>
                                <span className={styles.timestampText}>
                                    {formatTime(msg.timestamp)}
                                </span>
                            </div>
                        )}
                        <div
                            className={`${styles.messageCell} ${msg.isBot ? styles.botMessage : styles.userMessage}`}
                        >
                            <div className={styles.messageContent}>
                                <div className={`${styles.messageHeader} ${msg.isBot ? styles.botHeader : styles.userHeader}`}>
                                    <div className={`${styles.avatar} ${msg.isBot ? styles.botAvatar : styles.userAvatar}`}>
                                        {msg.isBot ? <Service /> : <User />}
                                    </div>
                                    <span className={`${styles.senderName} ${msg.isBot ? styles.botName : styles.userName}`}>
                                        {msg.isBot ? '酒店客服' : '我'}
                                    </span>
                                </div>
                                <div className={styles.messageText}>
                                    {msg.content.split('\n').map((line, i) => (
                                        <p key={i} className={styles.messageLine}>{line}</p>
                                    ))}
                                </div>
                            </div>
                        </div>
                    </React.Fragment>
                ))}

                {/* 客服正在输入提示 */}
                {isTyping && (
                    <div className={`${styles.messageCell} ${styles.botMessage} ${styles.typingIndicator}`}>
                        <div className={styles.typingDot}></div>
                        <div className={styles.typingDot}></div>
                        <div className={styles.typingDot}></div>
                    </div>
                )}

                {/* 转人工客服按钮，在需要时显示 */}
                {showTransfer && (
                    <button
                        className={styles.transferButton}
                        onClick={() => {
                            setShowTransfer1(true)
                        }}
                    >
                        转接人工客服
                    </button>
                )}

                <div ref={chatEndRef} />
            </div>

            {/* 快捷回复区域 */}
            <div className={styles.quickReplies}>
                {quickReplies.map((text, index) => (
                    <button
                        key={index}
                        className={styles.quickReplyButton}
                        onClick={() => handleQuickReply(text)}
                    >
                        {text}
                    </button>
                ))}
            </div>

            {/* 输入区域 */}
            <div className={styles.inputArea}>
                <input
                    className={styles.inputField}
                    value={inputMsg}
                    onChange={(e) => setInputMsg(e.target.value)}
                    placeholder="请输入您要咨询的问题"
                    onKeyPress={(e) => e.key === 'Enter' && handleSend()}
                />
                <button
                    className={styles.sendButton}
                    onClick={handleSend}
                    disabled={!inputMsg.trim()}
                >
                    发送
                </button>
            </div>
            {/* 转人工对话框 */}
            {/* {showTransfer1 && (
                <Dialog
                    title="转接人工客服"
                    visible={showTransfer}
                    onConfirm={handleTransfer}
                    onCancel={() => setShowTransfer(false)}
                    confirmText="确认转接"
                    cancelText="继续咨询"
                >
                    <div style={{ padding: '10px' }}>
                        <p>工作时间：08:00-22:00</p>
                        <p>当前排队人数：2人</p>
                    </div>
                </Dialog>
            )} */}
            {/* 使用条件渲染替代 visible 属性，避免 findDOMNode 警告 */}
            {/* {showTransfer1 && (
                <div className={styles.customDialog}>
                    <div className={styles.dialogOverlay} onClick={() => setShowTransfer1(false)}></div>
                    <div className={styles.dialogContent}>
                        <div className={styles.dialogHeader}>
                            <h3 className={styles.dialogTitle}>转接人工客服</h3>
                        </div>
                        <div className={styles.dialogBody}>
                            <p>工作时间：08:00-22:00</p>
                            <p>当前排队人数：2人</p>
                        </div>
                        <div className={styles.dialogFooter}>
                            <button
                                className={styles.cancelButton}
                                onClick={() => setShowTransfer1(false)}
                            >
                                继续咨询
                            </button>
                            <button
                                className={styles.confirmButton}
                                onClick={handleTransfer}
                            >
                                确认转接
                            </button>
                        </div>
                    </div>
                </div>
            )} */}
            {showTransfer1 && (
                <div className={styles.customDialog}>
                    <div className={styles.dialogOverlay} onClick={() => setShowTransfer1(false)}></div>
                    <div className={styles.dialogContent}>
                        <div className={styles.dialogHeader}>
                            <h3 className={styles.dialogTitle}>转接人工客服</h3>
                        </div>
                        <div className={styles.dialogBody}>
                            <p className={styles.dialogInfo}>工作时间: 08:00-22:00</p>
                            <p className={styles.dialogInfo}>当前排队人数: 2人</p>
                        </div>
                        <div className={styles.dialogFooter}>
                            <button
                                className={styles.cancelButton}
                                onClick={() => setShowTransfer1(false)}
                            >
                                继续咨询
                            </button>
                            <button
                                className={styles.confirmButton}
                                onClick={handleTransfer}
                            >
                                确认转接
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};

export default Merchant;